<template>
	<div class="icons">
		<swiper>
			<swiper-slide 
			v-for="(list,key) of pages" 
			:key="key"
			>
				<div 
				class="icon"
				v-for="item of list"
				:key="item.id"
				>
					<div class="icon-img">
						<img class="icon-img-content" :src="item.imgUrl" />
					</div>
					<p class="icon-desc">{{item.desc}}</p>
				</div>
			</swiper-slide>
		</swiper>
	</div>
</template>

<script>
export default {
	name: 'HomeIcons',
	props: {
		"iconList": [Object, Array]
	},
	computed: {
		pages () {
			const pages = []
			this.iconList.forEach((item,index) => {
				const page = Math.floor(index / 8)
				if (!pages[page]) {
					pages[page] = []
				}
				pages[page].push(item)
			})
			return pages
		}
	}
}
</script>

<style lang="stylus" scoped>
@import '~styles/varibles.styl'
@import '~styles/mixins.styl'
.icons >>> .swiper-container
	overflow: hidden
	height: 0
	padding-bottom: 50%
	.icon
		position:relative
		float: left
		width: 25%
		padding-bottom: 25%
	.icon-img
		position: absolute
		top: 0
		left: 0
		right: 0
		bottom: .44rem
		.icon-img-content
			height: 100%
			display: block
			margin: 0 auto
	.icon-desc
		position: absolute
		left: 0
		right: 0
		bottom: 0
		text-align: center
		height: .44rem
		line-height: .44rem
		color: 	$darkTextColor
		ellipsis()	
</style>




